<div>
    <h3 class="header smaller lighter blue">
    	&nbsp;&nbsp;&nbsp;&nbsp;
    	<a href="/#/cluster_list">Cluster List</a>
        <span> > </span>
    	<a href="/#/cluster_list?clusterName={{clusterName}}">{{clusterName}}</a>
    	<span> > </span>
    	<span>详情</span>
    </h3>
    <div>
        <div style="height:35px">
            <ul style="float:left" class="nav nav-tabs padding-18 tab-size-bigger" ng-if="dcs && dcs.length">
                <li ng-repeat="dc in dcs" ng-class="{'active': currentDcName == dc.dcName}">
                    <a ng-click="switchDc(dc)" data-toggle="tab">
                        {{dc.dcName}}
                    </a>
                </li>
            </ul>
            <button ng-if="showCrossMasterHealthStatus" style="float:right; margin:8px 5px 0 0" class="btn btn-xs btn-white btn-info btn-bold" ng-click="unfoldAllUnhealthyDelay()">
                展开问题延迟
            </button>
        </div>

        <div class="tab-content" ng-if="dcs && dcs.length" >
            <div>
                <div class="panel panel-primary" style="margin-top: 15px;" ng-repeat="shard in shards">
                    <header class="panel-heading">
                        <div class="row">
                            <div class="col-md-6">{{shard.shardTbl.shardName}}(cluster_{{shard.shardTbl.clusterId}}.shard_{{shard.shardTbl.id}})</div>
                            <div class="col-md-6 text-right">
                                <a class="btn btn-success btn-sm" ng-if="clusterType == 'one_way' || clusterType == 'hetero' " href="/#/full_link_health_check?currentDcName={{currentDcName}}&clusterName={{clusterName}}&shardName={{shard.shardTbl.shardName}}&shardId={{shard.shardTbl.id}}" target="_blank">健康检测</a>
                                <a class="btn btn-primary btn-sm" ng-if="routeAvail === true && (clusterType == 'bi_direction'|| clusterType == 'one_way')" href="/#/chain/{{clusterName}}/{{currentDcName}}">Proxy-Chain</a>
                            	<a class="btn btn-primary btn-sm" href="/#/cluster_dc_shard_update?clusterName={{clusterName}}&shardName={{shard.shardTbl.shardName}}&currentDcName={{currentDcName}}">编辑</a>
                            </div>
                        </div>
                    </header>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>
                                角色
                            </th>
                            <th>
                                IP
                            </th>
                            <th>
                                端口
                            </th>
                            <th ng-if="clusterType == 'bi_direction'||clusterType == 'one_way' ||clusterType == 'hetero'">
                            	状态
                            </th>
                            <th ng-if="clusterType == 'bi_direction'||clusterType == 'one_way' ||clusterType == 'hetero'">
                                延迟
                            </th>
                            <th ng-if="clusterType == 'bi_direction'" title="发送给其他master的流量">
                                出流量
                            </th>
                            <th ng-if="clusterType == 'bi_direction'" title="接收到其他master的流量">
                                入流量
                            </th>
                            <th ng-if="clusterType == 'bi_direction'" title="双向同步全量同步次数">
                                全量
                            </th>
                            <th ng-if="clusterType == 'bi_direction'" title="双向同步增量同步次数">
                                增量
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="redis in shard.redises">
                            <td title="{{redis.runId}}">
                                <span class="label label-info" ng-if="redis.master === true">
                                    Master</span>  Redis
                            </td>
                            <td ng-bind="redis.redisIp">
                            </td>
                            <td ng-bind="redis.redisPort">
                            </td>
                            <td ng-if="clusterType == 'bi_direction'|| clusterType == 'one_way'">
                                <span style="position: relative" ng-if="undefined !== redis.healthy" class="{{redis.healthy ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}">
                                    <button ng-if="showCrossMasterHealthStatus && redis.master && !redis.healthy" style="position: absolute; left: 20px; top: -3px;" class="btn btn-info btn-minier btn-yellow"
                                            ng-click="shard.showCrossMasters = !shard.showCrossMasters">
                                        {{shard.showCrossMasters ? '折叠延迟' : '展开延迟'}}
                                </button>
                                </span>
                            </td>
                            <td ng-if="clusterType == 'bi_direction'|| clusterType == 'one_way'" ng-class="{'hickwall_td': clusterType == 'bi_direction'}"><span class="hickwall" aria-hidden="true" ng-click="gotoHickwall(clusterName,shard.shardTbl.shardName,redis.redisIp, redis.redisPort, 'default')"></span></td>
                            <td ng-if="clusterType == 'bi_direction'" class="hickwall_td">
                                <span  class="hickwall" aria-hidden="true" ng-click="gotoOutComingTrafficToPeerHickwall(redis.redisIp, redis.redisPort)"></span>
                            </td>
                            <td ng-if="clusterType == 'bi_direction'" class="hickwall_td">
                                <span class="hickwall" aria-hidden="true" ng-click="gotoInComingTrafficFromPeerHickwall(redis.redisIp, redis.redisPort)"></span>
                            </td>
                            <td ng-if="clusterType == 'bi_direction'" class="hickwall_td">
                                <span class="hickwall" aria-hidden="true" ng-click="gotoPeerSyncFullHickwall(redis.redisIp, redis.redisPort)"></span>
                            </td>
                            <td ng-if="clusterType == 'bi_direction'" class="hickwall_td">
                                <span class="hickwall" aria-hidden="true" ng-click="gotoPeerSyncPartialHickwall(redis.redisIp, redis.redisPort)"></span>
                            </td>
                        </tr>
                        <tr ng-repeat="keeper in shard.keepers">
                            <td title="{{keeper.runId}}">
                                <span class="label label-info" ng-if="keeper.keeperActive">
                                    active</span>  Keeper
                            </td>
                            <td ng-bind="keeper.redisIp">
                            </td>
                            <td ng-bind="keeper.redisPort">
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr ng-show="showCrossMasterHealthStatus && false === shard.healthy && shard.showCrossMasters" ng-repeat="redis in shard.crossMasters">
                            <td>
                                <span class="label label-info">{{redis.redisDc}}</span>  Master
                            </td>
                            <td>{{redis.redisIp || "-"}}</td>
                            <td>{{redis.redisPort || "-"}}</td>
                            <td>
                            <span ng-if="undefined !== redis.healthy" class="{{redis.healthy ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}"></span>
                            </td>
                            <td><span class="hickwall" aria-hidden="true" ng-click="gotoCrossMasterHickwall(shard.shardTbl.shardName, redis.redisDc)"></span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div ng-repeat="source in sources">
                <div class="panel panel-primary" style="margin-top: 15px;" ng-if="clusterType == 'one_way'" ng-repeat="shard in source.shards">
                    <header class="panel-heading" style="background: #C7EDCC">
                        <div class="row">

                            <div class="col-md-10">
                                <font color="black" class="col-md-10">
                                    src-dc:{{source.replDirectionInfoModel.srcDcName}} upstream-dc:{{source.replDirectionInfoModel.fromDcName}} {{shard.shardTbl.shardName}} (clusterId:{{shard.shardTbl.clusterId}},shardId:{{shard.shardTbl.id}}) 上下游延迟:{{shard.delay}}ms
                                </font>
                            </div>
                            <div class="col-md-2 text-right">
                                <a class="btn btn-success btn-sm" style="background: #CCFF33" ng-if="routeAvail === true" href="/#/chain/{{clusterName}}/{{currentDcName}}">Proxy-Chain</a>
                                <a class="btn btn-success btn-sm" href="/#/cluster_dc_shard_update?clusterName={{clusterName}}&shardName={{shard.shardTbl.shardName}}&currentDcName={{currentDcName}}&srcDcName={{source.replDirectionInfoModel.srcDcName}}">编辑</a>
                            </div>
                        </div>
                    </header>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>
                                角色
                            </th>
                            <th>
                                IP
                            </th>
                            <th>
                                端口
                            </th>
                            <th ng-if="clusterType == 'bi_direction'|| clusterType == 'one_way'">
                                状态
                            </th>
                            <th ng-if="clusterType == 'bi_direction'|| clusterType == 'one_way'">
                                延迟
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="applier in shard.appliers">
                            <td>
                                <span class="label label-success" ng-if="applier.active === true">
                                    active</span>  Applier
                            </td>
                            <td ng-bind="applier.ip">
                            </td>
                            <td ng-bind="applier.port">
                            </td>
                            <td ng-if="clusterType == 'bi_direction'||clusterType == 'one_way'">
                                <span style="position: relative" ng-if="undefined !== shard.heteroDelayhealthy && applier.active === true" class="{{shard.heteroDelayhealthy ? 'glyphicon glyphicon-ok-sign green' : 'glyphicon glyphicon-remove-sign red'}}">
<!--                                    <button ng-if="showCrossMasterHealthStatus && redis.master && !redis.healthy" style="position: absolute; left: 20px; top: -3px;" class="btn btn-info btn-minier btn-yellow"-->
<!--                                            ng-click="shard.showCrossMasters = !shard.showCrossMasters">-->
<!--                                        {{shard.showCrossMasters ? '折叠延迟' : '展开延迟'}}-->
<!--                                </button>-->
                                </span>
                            </td>
                            <td ng-if="clusterType == 'bi_direction'||clusterType == 'one_way'" ng-class="{'hickwall_td': clusterType == 'bi_direction'}"><span ng-if="applier.active === true" class="hickwall" aria-hidden="true" ng-click="gotoHeteroHickwall(clusterName, shard.shardTbl.id, 'hetero')"></span></td>
                        </tr>
                        <tr ng-repeat="keeper in shard.keepers">
                            <td title="{{keeper.runId}}">
                                <span class="label label-success" ng-if="keeper.keeperActive">
                                    active</span>  Keeper
                            </td>
                            <td ng-bind="keeper.redisIp">
                            </td>
                            <td ng-bind="keeper.redisPort">
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div ng-if="(!dcs || !dcs.length) && clusterName">
            无shards
        </div>
    </div>
</div>

